/**
 * Created by ZZT on 2017/7/16.
 */
;(function () {

    function Carousel(target,config) {
        var _this = this;
        this.target = target;
        this.ul = target.getElementsByTagName("ul")[0];
        this.li = target.getElementsByTagName("li");
        var img = target.getElementsByTagName("img")[0];

        this.buttons = null;
        this.navs = null;
        this.timmer = null;
        this.loop = 0;


        this.config = {
            "effect":"default",/*图片出现方式：default为直接偏移出现；fade为淡入淡出(不考虑速度)；push为推压*/
            "direction":"horizontal",/*图片出现方向：horizontal：水平方向；vertical：垂直方向，对fade无效*/
            "switch":"false",/*是否有前后切换按钮：false：无；true：有*/
            "navStyle":"dot",/*导航栏的样式：dot：常规点状；bar：条状；default 无*/
            "speed":"default",/*切换速度：default：2s；fast：1s；slow：3s*/
            "clickBnt":"false"
        };

        this.speed = isNaN(this.config.speed) ? 2000 : (this.config.speed);


        myJS.extend(this.config,this.setConfig(config));
        this.setCss();
        this.setNavBar();
        this.setClickBnt();
        this.autoPlay();
        /*设置前后切换按钮与自动播放*/
        if(this.config.clickBnt === "true"){
            target.onmouseover = function () {
                clearInterval(_this.timmer);
                myJS.css(_this.buttons,"display","inline-block");
                myJS.css(_this.buttons,"cursor","pointer");
                _this.buttons[0].onclick = function () {
                    _this.invoke(-1)
                };
                _this.buttons[1].onclick = function () {
                    _this.invoke(1)
                };
                target.onmouseout = function () {
                    _this.autoPlay();
                    myJS.css(_this.buttons,"display","none");
                }
            }
        }
        var we = document.getElementsByClassName("stylesBar");

        if(we === null){
            console.log(123);
            console.log(we);
        }else{
            console.log("so");
        }

    }

    Carousel.prototype = {

        setConfig:function (config) {
            if(JSON.stringify(config)=="{}"){
                var temp = document.getElementsByClassName("carouselBox")[0]
                    .getAttribute("data-config");
                if(temp == null){
                    return null;
                }else {
                    return temp;
                }
            }else {
                return config;
            }
        },

        setCss:function () {
            var i;
            var e = this.config.effect;
            var d = this.config.direction;
            var t = this.target;
            var u = t.getElementsByTagName("ul");
            var l = this.li;
            myJS.css(u,"position","relative");

            if(e ==="fade"){
                myJS.setOpacity(l,100);
                for(i = 0;i < l.length;i++){
                    l[i].style.position = "absolute";
                }/*因为e是个集合元素，必须遍历设置，否则报错*/
            }else if(e ==="push"){
                if(d ==="horizontal"||d !=="vertical"){
                    myJS.css(u,"left","0px");
                    myJS.css(l,"position","relative");
                    myJS.css(l,"cssFloat","left");
                }else {
                    myJS.css(u,"top","0px");
                    myJS.css(l,"position","relative");
                }
            }else {
                if(d ==="horizontal"||d !=="vertical"){
                    myJS.css(u,"left","0px");
                    myJS.css(l,"cssFloat","left");
                    myJS.css(l,"float","left");
                    /*为了兼容IE8 ，它识别不了cssFloat*/
                }else {
                    myJS.css(u,"top","0px");
                }
            }/*此处因为是三选一，所以不需要考虑i闭包问题*/
        },

        invoke:function (b) {
            var _this = this;
            var tmp = index;
            var t = this.target;
            var u = this.ul;
            var l = this.li[index];
            var s = myJS.siblings(l);
            var e = this.config.effect;
            var d = this.config.direction;
            var w = this.config.width;
            var h = this.config.height;
            var n = this.li.length;

            if(e === "fade"){
                myJS.fadeOut(s);
                myJS.fadeIn(l);
            }else if(e ==="push"){
                if(d === "vertical"){

                }else{

                }
            }else {
                if(d === "vertical"){
                    var uT = parseInt(u.style.top);
                    if(b < 0){
                        u.style.top = uT >= 0 ? (-h*(n-1)+ "px") : ((uT + h)+"px");
                    }else{
                        u.style.top = uT <= (-h * (n-1)) ? (0 + "px") : ((uT - h)+"px");
                    }
                }else{
                    var uL = parseInt(u.style.left);
                    if(b < 0){
                        u.style.left = uL >= 0 ? ( -w * (n - 1) + "px") : ((uL + w)+"px");
                    }else{
                        u.style.left = uL <= (-w * (n - 1)) ? ( 0 + "px") : ((uL - w)+"px");
                    }
                    /*用index值来判断，可优化*/
                }
            }
            if(b >= 0){
                index++;
            }else {
                index--;
            }
            if(index>=5){
                index = 0;
            }else if(index < 0){
                index = 4;
            }
            this.navs[index].className = "spanBarOn";
            this.navs[tmp].className = "spanBar";
        },

        autoPlay:function () {
            var _this = this;
            var sp = this.config.speed;
            var s = f(sp);
            function f(sp) {
                if(sp ==="slow"){
                    return 3000;
                }else if(sp ==="fast"){
                    return 1000;
                }else {
                    return 2000;
                }
                /*更改顺序可优化性能*/
            }
            this.timmer = setInterval(function () {
                _this.invoke(1);
            },s);
        },

        setNavBar:function () {
            var t = this.target;
            var n = this.config.navStyle;
            var l = this.li.length;
            var nb = document.createElement("div");

            var styles;
            var s = "<span></span>";
            var tmp = [];
            for(var i = 0;i < l ;i++){
                tmp.push(s)
            }
            s = tmp.join("");
            nb.innerHTML = s;
            t.appendChild(nb);
            nb.className = "divBar";
            this.navs = nb.getElementsByTagName("span");
            for(var j = 0;j < this.navs.length;j++){
                (this.navs[j]).className = "spanBar";
            }
            if(myJS.getClass("style","stylesBar").length ===0) {
                console.log(1234);
                if (n === "dot") {
                    styles = ".spanBar{display:block;float:left;margin:10px;border:1px solid #e3e3e3;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#fff;}" +
                        ".spanBarOn{display:block;float:left;margin:10px;border:1px solid #e3e3e3;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#38A0E4;opacity:0.6;filter:alpha(opacity=60);}" +
                        ".divBar{width:300px;height:30px;padding:0 10px;position:absolute;z-index:1;left:50%;margin-left:-90px;bottom:2px;text-align:center;}";
                } else if (n === "bar") {
                    styles = ".spanBar{display:block;float:left;margin:5px;border:1px solid #e3e3e3;width:30px;height:5px;cursor:pointer;background-color:#fff;}" +
                        ".spanBarOn{display:block;float:left;margin:5px;border:1px solid #e3e3e3;width:30px;height:5px;cursor:pointer;background-color:#38A0E4;opacity:0.6;filter:alpha(opacity=60);}" +
                        ".divBar{width:300px;height:30px;padding:0 10px;position:absolute;z-index:1;left:50%;margin-left:-110px;bottom:2px;text-align:center;}";
                }
                myJS.appendStyle(styles, "stylesBar");
            }
        },

        setClickBnt:function () {
            var c = this.config.clickBnt;
            var t = this.target;
            if(c ==="true"){
                /*js动态创建元素，此方法适用于创建较多、较复杂元素*/
                var b = [];
                b[0] = document.createElement("div");
                b[1] = document.createElement("div");
                this.buttons = b;
                b[0].innerHTML = "<";
                b[1].innerHTML = ">";
                t.appendChild(b[0]);
                t.appendChild(b[1]);
                // b.onmouseover = function () {
                //     myJS.css(b,"display","inline-block");
                // };函数内部设置监听事件，无法实现，是否与函数作用域有关？
                myJS.css(b,"width","50px");
                myJS.css(b,"height","50px");
                myJS.css(b,"fontSize","40px");
                myJS.css(b,"display","none");
                myJS.css(b,"textAlign","center");
                myJS.css(b,"lineHeight","50px");
                myJS.css(b,"color","#fff");
                myJS.css(b,"background","#000");
                myJS.setOpacity(b,"50");
                myJS.css(b,"position","relative");
                myJS.css(b,"top","-175px");
                b[1].style.left = "460px";
            }
        }



    };

    window.Carousel = Carousel;
})();


/* = = = = = 扩展函数 = = = = = */
var myJS ={
    /* 扩展对象 */
    extend:(function () {
        for (var p in {toString: null}) {
            //检查当前浏览器是否支持forin循环去遍历出一个不可枚举的属性，比如toString属性，如果不能遍历不可枚举的属性(IE浏览器缺陷)，那么forin循环不会进来
            return function extend(o) {
                for (var i = 1, len = arguments.length; i < len; i++) {
                    var source = arguments[i];
                    for (prop in source) {
                        o[prop] = source[prop];
                    }
                }
            }
        }  //这些属性需要特殊检查一下，因为有的IE浏览器不支持for in去遍历这些属性

        var protoprops = [
            'toString',
            'valueOf',
            'constructor',
            'hasOwnProperty',
            'isPropertyOf',
            'propertyIsEnumerable',
            'toLocalString'
        ];
        return function patched_extend(o) {
            for (var i = 1,len = arguments.length; i < len; i++) {
                var source = arguments[i];
                for (prop in source) { //先遍历常规的属性
                    o[prop] = source[prop];
                }      //检查是否有特殊属性，防止漏掉

                for (var j = 0, len = protoprops.length; j < len; j++) {
                    prop = protoprops[j];
                    if (source.hasOwnProperty(prop)) {
                        o[prop] = source[prop];
                    }
                }
            }
            return o;
        }
    })(),
    /* 设置css */
    css:function (obj,a,b) {
        var ol = obj.length;
        if(b == null){
            if(ol){
                var c = new Array(ol);
                for(var j = 0;j < ol;j++){
                    c[j] =eval("obj[j].style."+a);
                }
                return c;
            }else {
                return eval("obj.style."+a);
            }
        }else {
            for(var i = 0;i < ol;i++){
                eval("obj[i].style."+a+"='"+b+"'");
            }
        }
    },
    /* siblings方法 */
    siblings:function(obj){
        var child=obj.parentNode.children;
        var e = [];
        for(var i=0,l=child.length;i<l;i++){
            if(child[i]!= obj){
                e.push(child[i]);
            }
        }
        return e;
    },
    /* 设置透明度 */
    setOpacity:function (e,o) {
        /*必须对e是否为数组进行判断，如果e是单个元素for循环不能执行*/
        var l = e.length;
        if(l){
            for(var i = 0;i < l;i++){
                e[i].style.filter = 'alpha(opacity:'+o+')';
                e[i].style.opacity = o/100;
            }
        }else {
            e.style.filter = 'alpha(opacity:'+o+')';
            e.style.opacity = o/100;
        }
    },
    /* fadeOut方法，淡出消失 */
    fadeOut:function (e,s,o) {
        /*
         * e ==>元素对象
         * s ==>淡出速度
         * o ==>淡出的透明度
         * */
        s = s || 10;
        o = o || 0;
        myJS.css(e,"display","block");/*减少可能的报错*/
        var v = myJS.css(e,"opacity");
        /*注意：此处元素对象的opacity必须是设置过的，否则js默认该属性不存在，获得的是一个空数列*/
        var timer = setInterval(function () {
            myJS.setOpacity(e,v);
            v = v - 5;
            if(v <= 0){
                clearInterval(timer);
            }
        },s);
    },
    /* fadeIn方法，淡入出现 */
    fadeIn:function (e,s,o) {
        s = s || 5;
        o = o || 100;
        myJS.css(e,"display","block");
        myJS.setOpacity(e,0);
        var v = 0;
        var timer = setInterval(function () {
            myJS.setOpacity(e,v);
            v = v + 5;
            if(v >= 100){
                clearInterval(timer);
            }
        },s);
    },

    appendStyle:function(styles,className){
        var style = document.createElement("style");
        style.className = className;
        if(!!window.ActiveXObject){/**for IE11以下*/
        style.type  = "text/css";
            style.media = "screen";
        }
        (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
        if (style.styleSheet) { //for ie11以下
            style.styleSheet.cssText = styles;
        } else {//for w3c
            style.appendChild(document.createTextNode(styles));
        }
    },
    getClass:function (tag,className) {
        var e = [];
        if(!document.getElementsByClassName){
            /*通过该方法未能获取元素，即getElementsByClassName()方法不能正常调用*/
            var dom = document.getElementsByTagName(tag);
            for( var i = 0;i < dom.length;i++){
                if(dom[i].className == className ){
                    e.push(dom[i]);
                }
            }
        }else{
            e = document.getElementsByClassName(className);
        }
        return e;
    }
};



/*测试区域*/

var u = document.getElementById("picsBox");
var li = u.getElementsByTagName("li");
var index = 0;


